<template>
  <div style="margin-left: 15px; margin-right: 15px">
    <h2>教师管理</h2>
    <el-button type="primary" icon="el-icon-plus" @click="addTeacher"
      >添加教师信息</el-button
    >

    <el-table :data="TeacherManagementInfo" style="margin-top: 10px">
      <el-table-column
        label="教师编号"
        width="100"
        prop="teacherNumber"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="姓名"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="60" align="center">
      </el-table-column>
      <el-table-column
        prop="DateOfBirth"
        label="出生年月"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="educationBackground"
        label="学历"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="rank" label="职称" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="dateOfBoard"
        label="入职年份"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="college" label="学院" width="150" align="center">
      </el-table-column>

      <el-table-column prop="prop" label="操作" width="150">
        <template slot-scope="{ row, $index }">
          <el-button
            type="primary"
            size="mini"
            @click="changeSubject(row, $index)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="deleteSubject($index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加教师信息 -->
    <el-dialog
      :title="this.teacherForm.teacherNumber ? '修改教师信息' : '添加教师信息'"
      :visible.sync="dialogFormVisible"
      center="center"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="教师编号">
          <el-input
            v-model="teacherForm.teacherNumber"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名 ">
          <el-input v-model="teacherForm.teacherName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="teacherForm.sex" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-input v-model="teacherForm.DateOfBirth" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input
            v-model="teacherForm.educationBackground"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="入职年份">
          <el-input v-model="teacherForm.dateOfBoard" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="院系">
          <el-select v-model="teacherForm.college" placeholder="请选择学院">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "StudentManagement",
  components: {},
  data() {
    return {
      options: [
        {
          value: "计算机科学与技术学院",
          label: "计算机科学与技术学院",
        },
        {
          value: "食品工程学院",
          label: "食品工程学院",
        },
        {
          value: "生化学院",
          label: "生化学院",
        },
        {
          value: "通信工程学院",
          label: "通信工程学院",
        },
        {
          value: "政法学院",
          label: "政法学院",
        },
        {
          value: "体育学院",
          label: "体育学院",
        },
      ],
      index: "",
      dialogFormVisible: false,
      TeacherManagementInfo: [],
      teacherForm: {
        teacherNumber: "1118",
        teacherName: "郭老师",
        sex: "女",
        DateOfBirth: "1996-05-18",
        educationBackground: "硕士",
        rank: "讲师",
        dateOfBoard: "2019-09-02",
        college: "计算机系",
      },
    };
  },
  methods: {
    async getCourseManagementInfo() {
      let teachermanagementInfo = await import(
        "@/data/teachermanagementInfo.json"
      );

      this.TeacherManagementInfo = teachermanagementInfo.teachermanagement;
    },
    // 添加课程
    addTeacher() {
      this.teacherForm = {};
      this.dialogFormVisible = true;
    },

    //保存课程
    handler() {
      if (this.index >= 0) {
        this.TeacherManagementInfo.splice(this.index, 1, this.teacherForm);
      } else {
        this.TeacherManagementInfo.unshift(this.teacherForm);
      }
      this.dialogFormVisible = false;
      this.$message({
        type: "success",
        message: this.teacherForm.subject
          ? "修改教师信息成功"
          : "添加教师信息成功",
        offset: 120,
      });
    },
    //修改课程
    changeSubject(row, index) {
      this.index = index;
      console.log(row);
      //深拷贝反正操作同一个地址
      this.teacherForm = { ...row };
      this.dialogFormVisible = true;
    },
    //删除课程
    deleteSubject(index) {
      this.TeacherManagementInfo.splice(index, 1);
      this.$message({
        type: "success",
        offset: 120,
        message: "删除成功",
      });
    },
  },

  mounted() {
    this.getCourseManagementInfo();
  },
};
</script>


<style scoped>
h2 {
  text-align: center;
}
</style>